<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>社交会所</title>
      <script src="__INDEX__/js/mui.min.js"></script>
    <link rel="stylesheet" href="/public/static/css/mobiscroll.custom.min.css">
	<link rel="stylesheet" href="__INDEX__/css/mui.min.css">
    <link rel="stylesheet" href="__INDEX__/css/style.css" />
    <link rel="stylesheet" href="__INDEX__/css/mall.css?3=4" />
</head>
<style>
.section {
	position: relative;
	height: 32px;
	padding-left: 80px;
	padding-right: 15px;
	margin-bottom: 10px;
	box-sizing: border-box;
}
.section label {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	height: 32px;
	line-height: 32px;
	;
	font-size: 12px;
}
.section>select,  .section>input {
	width: 100%;
	height: 100%;
	display: block;
	padding: 0 30px;
	font-size: 16px;
	box-sizing: border-box;
}
</style>
<body>
	<div class="mui-content cp_content" style="padding-bottom: 20px;">
	    {include file="public/top" /}
	<form id='my_form' method="post" class="layui-form">
		<br />
		  <div class="ad2"><img src="__INDEX__/images/banner8.jpg"></div>
		 <div class="biaodbox">
	    	<div class="type clearfix">
	    		<span>预订类型：</span>
	    		<div class="mui-input-group">
					<div class="mui-input-row mui-radio mui-left">
						<label>会员</label>
						<input lay-ignore  name="re_type" value="0" type="radio" style="display: block;">
					</div>
					<div class="mui-input-row mui-radio mui-left">
						<label>非会员</label>
						<input lay-ignore name="re_type" value="1" type="radio" checked style="display: block;">
					</div>
				</div>
	    	</div>
	    	<ul class="biaod_list">
	    		<li>
	    			<label>预订人姓名：</label>
	    			<input placeholder="请输入预订人姓名" type="text" name="re_name" id='re_name'  lay-verify="required" autocomplete="off" class="layui-input"/>
	    		</li>
	    		<li>
	    			<div class="section">
				      <label style="font-size: 16px;">预订使用时间:</label>
				      <input placeholder="请选择使用时间" type="text" name="re_time" id="re_time" lay-verify="required"/>
				    </div>
	    		</li>
	    		<li>
	    			<label>使用场地人数：</label>
	    			<input placeholder="请输入使用场地人数" type="text" name="re_people" id='re_people' lay-verify="required" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
	    		</li>
	    		<li>
	    			<label>需要设施服务说明：</label>
	    			<input placeholder="请输入使用说明" type="text" name="service" id='service'  lay-verify="required"/>
	    		</li>
	    		<li>
	    			<label>联系电话：</label>
	    			<input placeholder="请输入联系电话"  type="text" name="mobile" id='mobile'  lay-verify="required"/>
	    		</li>
	    	</ul>
	    </div>
	    <button type="button" id='but' class="sjhs_btn" lay-submit lay-filter="my_form">提交预订</button>
	   
		<input type="hidden" name="home_id" value="{$list.id}">
		<input type="hidden" name='balance'  value="{$list.sale_price}">
	    <div class="sjhs_conbox">
	    	<div><img src="{$list.thumb}"></div>
	    	<div class="sjhs_nambox" style="padding-bottom: 0;">
				<div class="left">
					<div class="name">{$list.home_name}</div>
				</div>
				<div class="right">
					<div class="pri">¥<em>{$list.cost_price}</em>/{$list.unit}起<br/>定金¥{$list.sale_price}</div>
				</div>
			</div>
	    	<div class="sjhs_jies">
				<p>{$list.content|html_entity_decode}</p>    	
	    	</div>
	    </div>
	</form>
	</div>
	<input id='order_sn' type="hidden">
	<div id="callback"></div>
</body>
    {include file="public/footer" /}
</html>
<script src="/public/static/js/mobiscroll.custom.min.js"></script>
<script>
	//时间空间
    var theme = "ios";
    var mode = "scroller";
    var display = "bottom";
    var lang="zh";
    $('#re_time').mobiscroll().datetime({
        theme: theme,
        mode: mode,
        display: display,
        lang: lang,
        dateFormat:"yyyy-mm-dd",
        minDate: new Date(2000,3,10,9,22),
        maxDate: new Date(2030,7,30,15,44),
        stepMinute: 1
    });
</script>
<script>
	//图片上传
	layui.use(['form'], function(){
  		var $ = layui.jquery,form = layui.form;
		//监听提交
	  	form.on('submit(my_form)', function(data){
		    send_form();
		    return false;
		});
	});
	
function send_form(){
	var id="{$Think.session.user_info.id}";
		if(id==null||id==""||id==undefined){
			layer.msg('请您先注册！',{time:2*1000},function() {
				window.location.href="{:url('member/regist')}";
			})
		}
	$.ajax({
		type:"post",
		url: "{:url('index/add_reserve')}",
		data: $('#my_form').serialize(),//表单数据
		success: function(data) {
			if(data.code == 200) {
				pay_money(data.order_sn);
		  	}
		}
	})
}
</script>
<script>
function pay_money(order_sn){
	$.ajax({
		url: "{:url('payment/lc_wechat')}",
		data: {
			out_trade_no	:order_sn,
			order_type		: 6,
			body			:"用户预定",
			attach			:"用户预定"
		},
		type: "post",
		dataType: "jsonp",
		jsonp: 'callback',
		jsonpCallback: 'jsonpCallback',
		success: function(data) {
			callpay(data);
		}
	})
}
function jsonpCallback(data) {
	$("#callback").append(data);
}
//调用微信JS api 支付
function jsApiCall(jsApiParameters) {
	WeixinJSBridge.invoke('getBrandWCPayRequest', jsApiParameters,
		function(res) {
			if(res.err_msg == "get_brand_wcpay_request:ok") {
				layer.msg("提交预定成功!", {
				  icon: 1,
				  time: 1000 //2秒关闭（如果不配置，默认是3秒）
				}, function(){
					location.href = "/index/member/yuding";
				});
			} else {
				layer.msg("支付失败");
			}
		}
	);
}

function callpay(jsApiParameters) {
	console.log(jsApiParameters);
	if(typeof WeixinJSBridge == "undefined") {
		if(document.addEventListener) {
			document.addEventListener('WeixinJSBridgeReady', jsApiCall(jsApiParameters), false);
		} else if(document.attachEvent) {
			document.attachEvent('WeixinJSBridgeReady', jsApiCall(jsApiParameters));
			document.attachEvent('onWeixinJSBridgeReady', jsApiCall(jsApiParameters));
		}
	} else {
		jsApiCall(jsApiParameters);
	}
}
</script>